<!DOCTYPE html>
<html>
    <head>
        <title>Test reported width of inline in float</title>
        <style>
            #outer {
                float: left;
                font-size: 15px;
            }
            p {
                clear: left;
            }
        </style>
        <script src="../../resources/testharness.js"></script>
        <script src="../../resources/testharnessreport.js"></script>
    </head>
    <body>
        <span id="outer"><span id="inner">Customer Supportz</span></span>
        <p>
            The reported inner width must be the same as the outer width.
        </p>
        <script>
            test(function() {
                var outer = document.getElementById('outer');
                var inner = document.getElementById('inner');

                assert_equals(outer.offsetWidth, inner.offsetWidth,
                    'Inner offsetWidth must match outer offsetWidth.');

                assert_equals(outer.offsetWidth,
                    Math.round(outer.getBoundingClientRect().width),
                    'Outer offsetWidth must match rounded width.');

                assert_equals(inner.offsetWidth,
                    Math.round(inner.getBoundingClientRect().width),
                    'Inner offsetWidth must match rounded width.');
            });
        </script>
    </body>
</html>
